← Về thư mục
📄 / / projects / blog / nhi-nhi-vo-blog / scratch / Personal Portfolio Website Design Guideline.md

Edit plan

1. Update "Beyond execution" vs "Hoạt động cộng đồng section"

VN: Chia sẻ Tri thức & Tác động Cộng đồng

Diễn giả Khách mời

Cố vấn & Mentor

Hoạt động Cộng đồng

### EN: Thought Leadership & Community Engagement

Guest Speaker

Advisor & Mentor

Community Engagement

2. Hero photo giảm opacity -0.15 (hiện tại -0.25)

3. Giảm size của các Core Value

4. Bổ sung logo Mia Saigon

5. Thay đổi CERTIFICATIONS & Training

EN CERTIFICATIONS & TRAINING Data, Analytics & Digital Transformation

Leadership & Organizational Development

Hospitality, Marketing & Employer Branding

VN: Dữ liệu, Phân tích & Chuyển đổi Số

Lãnh đạo & Phát triển Tổ chức

Quản trị Khách sạn, Marketing & Employer Branding

Personal Portfolio Website — Master Design Brief

Project Objective

Build a timeless personal positioning website that functions as a long-term brand asset instead of an online resume. The website should communicate strategic thinking, quiet confidence, intellectual depth, Vietnamese identity, executive credibility, and elegant restraint. It should feel like reading a premium editorial publication rather than browsing a portfolio or CV.


Core Philosophy

Design Philosophy

User Experience Philosophy


Phase 1 — Creative Direction

Design Direction

Hybrid (70% Editorial + 30% Executive)

Keywords

Design Principles

Background #F7F5F2 ↓ Paper #FBFAF8 ↓ Ink #1F2A33 ↓ Secondary Ink #5E6873 ↓ Watercolor Blue #7B9FB8 ↓ Muted Terracotta #C98E73


Phase 1.5 — Narrative Blueprint

Chapter 1 — Why do I care? (Purpose)

Hero section. Keep "Made by Vietnam" as the opening idea. Introduce purpose instead of achievements. [Core Metrics] [Trusted by Brands]

Chapter 2 — How do I approach problems? (Capabilities)

Explain the thinking framework rather than listing competencies. Strategic Marketing, Partnership, Hospitality and Data represent four lenses through which problems are approached.

Chapter 3 — Where has this thinking been tested? (Evidence)

Rename Professional Experience into Selected Journey or Professional Journey. Maintain expandable timeline. Reflection will be added beneath each expanded journey later.

Chapter 4 — Beyond Execution (Contribution)

Speaking and mentoring demonstrate that the thinking is transferable, teachable and valuable beyond project execution.

Chapter 5 — Continuous Learning

Education represents continuous growth instead of academic history.

Moments from profesional to daily life that means a lot to my self-development

Chapter 6 — Who am I becoming? (Character)

Values become the emotional ending of the story. The website ends with the person rather than the resume.

Chapter 7 — Let's Talk

Simple footer and contact section.


Phase 2 — Wireframe

Reading Flow

Purpose → Framework → Evidence → Contribution → Growth → Character → Contact

Homepage Structure

┌────────────────────────────────────────────────────────────┐
│ Navigation                                                 │
├────────────────────────────────────────────────────────────┤
│ HERO                                                      │
│ Made by Vietnam                                           │
│ Purpose                                                   │
│ Illustration + Introduction                              │
└────────────────────────────────────────────────────────────┘

↓↓ Large whitespace

┌────────────────────────────────────────────────────────────┐
│ HOW DO I APPROACH PROBLEMS?                               │
│                                                            │
│ Strategic Marketing      Partnership                       │
│ Tourism & Hospitality    Data & AI                         │
└────────────────────────────────────────────────────────────┘

↓↓ Medium whitespace

┌────────────────────────────────────────────────────────────┐
│ WHERE HAS THIS THINKING BEEN TESTED?                       │
│                                                            │
│ ● Journey 01  ──────────────── Expand                      │
│ ● Journey 02  ──────────────── Expand                      │
│ ● Journey 03  ──────────────── Expand                      │
│ ● Journey 04  ──────────────── Expand                      │
└────────────────────────────────────────────────────────────┘

↓↓ Medium whitespace

┌────────────────────────────────────────────────────────────┐
│ BEYOND EXECUTION                                           │
│ Speaking                                                   │
│ Advisory                                                   │
│ Mentoring                                                  │
└────────────────────────────────────────────────────────────┘

↓↓ Medium whitespace

┌────────────────────────────────────────────────────────────┐
│ CONTINUOUS LEARNING                                        │
│ Education                                                  │
│ Certifications                                             │
└────────────────────────────────────────────────────────────┘

↓↓ Large whitespace

┌────────────────────────────────────────────────────────────┐
│ WHO AM I BECOMING?                                         │
│ Values                                                     │
│ Closing Reflection                                         │
└────────────────────────────────────────────────────────────┘

↓↓

┌────────────────────────────────────────────────────────────┐
│ FOOTER                                                     │
│ Contact                                                    │
└────────────────────────────────────────────────────────────┘

Reading Rhythm


Phase 3 — High Fidelity Design

Visual Language

Hybrid (70% Editorial + 30% Executive)

Design Principles

Component List

Color & Material

Paper + Watercolor + Ink

Motion System


Phase 4 — UI Specification

Layout Rules

Chapter Specification

Component Rules

Responsive Rules

Content Rules

Consistency Checklist


Guiding Principle

Every design decision must answer one question:

Does this help readers understand the person more deeply without changing who she is?

If not, remove it.